<template>
  <!-- 添加和修改章节表单 -->
  <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
    <el-form :model="chapter" label-width="120px">
      <el-form-item label="章节标题">
        <el-input v-model="chapter.title" />
      </el-form-item>
      <el-form-item label="章节排序">
        <el-input-number
          v-model="chapter.sort"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import chapterApi from "@/api/edu/chapter";
export default {
  data() {
    return {
      dialogChapterFormVisible: false, // 隐藏组件
      chapter: {},
    };
  },
  methods: {
    saveOrUpdate() {
      // 根据章节id - chapterId来进行判断，有就是修改，没有就是新增
      // 如果是update，会回显，this.chapter是有值的，肯定有id
      if (!this.chapter.id) {
        this.save();
      } else {
        this.update();
      }
    },
    // 添加章节
    save() {
      // 章节是课程下的章节，所以要有课程id
      this.chapter.courseId = this.$parent.$parent.courseId;
      chapterApi.addChapter(this.chapter).then(response => {
        this.$message.success("添加成功");
        // 保存之后需要做的操作
        this.help();
      });
    },
    // 修改方法
    update() {
      chapterApi.updateChapterById(this.chapter).then((response) => {
        this.$message.success("修改成功");
        // 保存之后需要做的操作
        this.help();
      });
    },
    // 根据章节id获取章节信息，用于回显
    getChapterById(id) {
      chapterApi.getChapterById(id).then((response) => {
        this.chapter = response.data.item;
      });
    },

    help() {
      // 1.刷新页面
      this.$parent.nestedListChapter(this.chapter.courseId);
      // 2.关闭弹窗 清空表单
      this.close();
    },
    // 打开弹窗
    open(id) {
      if (id) {
        // 回显
        this.getChapterById(id);
      }
      this.dialogChapterFormVisible = true;
    },
    // 关闭弹窗
    close() {
      this.dialogChapterFormVisible = false;
      this.chapter = {};
    },
  },
};
</script>